<template>
  <g
    class="flicker"
    fill="#fff"
    :transform="`translate(${props.x}, ${props.y})`"
  >
    <g v-if="type === 1">
      <rect x="3" y="7" width="9" height="1" />
      <rect x="6" y="6" width="3" height="3" />
      <rect x="7" y="3" width="1" height="9" />
    </g>
    <g v-else-if="type === 2">
      <rect x="2" y="7" width="11" height="1" />
      <rect x="5" y="6" width="5" height="3" />
      <rect x="6" y="5" width="3" height="5" />
      <rect x="7" y="2" width="1" height="11" />
    </g>
    <g v-else-if="type === 3">
      <rect x="1" y="7" width="13" height="1" />
      <rect x="4" y="6" width="7" height="3" />
      <rect x="6" y="4" width="3" height="7" />
      <rect x="7" y="1" width="1" height="13" />
    </g>
    <g v-else-if="type === 4">
      <rect x="0" y="7" width="15" height="1" />
      <rect x="3" y="6" width="9" height="3" />
      <rect x="5" y="5" width="5" height="5" />
      <rect x="6" y="3" width="3" height="9" />
      <rect x="7" y="0" width="1" height="15" />
    </g>
  </g>
</template>

<script setup>
  import { TANK, FLICKER } from '@/utils/global'
  import { computed } from 'vue'

  const props = defineProps({
    index: {
      type: Number,
      default: 0
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
  })

  const type = computed(() => FLICKER.process[props.index].type)
</script>

<style lang="scss" scoped>

</style>